<template>
  <view class="modify-time">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrow-left" size="24" color="#333"></uni-icons>
      </view>
      <view class="page-title">修改服务时间</view>
    </view>
    
    <!-- 当前服务时间 -->
    <view class="current-time">
      <view class="section-title">当前服务时间</view>
      <view class="time-info">{{ orderInfo.serviceDate }} {{ orderInfo.serviceTime }}</view>
    </view>
    
    <!-- 选择新的服务时间 -->
    <view class="new-time">
      <view class="section-title">选择新的服务时间</view>
      
      <!-- 日期选择 -->
      <view class="date-selector">
        <scroll-view scroll-x class="date-scroll">
          <view 
            v-for="(date, index) in availableDates" 
            :key="index"
            class="date-item"
            :class="{ active: selectedDate === date.value }"
            @click="selectDate(date.value)"
          >
            <text class="date-day">{{ date.day }}</text>
            <text class="date-date">{{ date.date }}</text>
            <text class="date-month">{{ date.month }}</text>
          </view>
        </scroll-view>
      </view>
      
      <!-- 时间段选择 -->
      <view class="time-selector">
        <view 
          v-for="(time, index) in availableTimes" 
          :key="index"
          class="time-item"
          :class="{ 
            active: selectedTime === time.value,
            disabled: time.disabled
          }"
          @click="selectTime(time)"
        >
          <text>{{ time.label }}</text>
          <text class="time-status" v-if="time.disabled">已约满</text>
        </view>
      </view>
    </view>
    
    <!-- 提示信息 -->
    <view class="tips">
      <uni-icons type="info" size="16" color="#ff9500"></uni-icons>
      <text>修改服务时间后，服务人员可能会发生变更</text>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="submit-btn" :disabled="!canSubmit" @click="submitChange">确认修改</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 订单信息
const orderInfo = ref({
  id: '1',
  serviceDate: '2023-06-20',
  serviceTime: '13:00-17:00'
});

// 可选日期
const availableDates = ref([
  { day: '今天', date: '20', month: '6月', value: '2023-06-20' },
  { day: '明天', date: '21', month: '6月', value: '2023-06-21' },
  { day: '周三', date: '22', month: '6月', value: '2023-06-22' },
  { day: '周四', date: '23', month: '6月', value: '2023-06-23' },
  { day: '周五', date: '24', month: '6月', value: '2023-06-24' },
  { day: '周六', date: '25', month: '6月', value: '2023-06-25' },
  { day: '周日', date: '26', month: '6月', value: '2023-06-26' }
]);

// 可选时间段
const availableTimes = ref([
  { label: '上午 (09:00-12:00)', value: '09:00-12:00', disabled: false },
  { label: '下午 (13:00-17:00)', value: '13:00-17:00', disabled: false },
  { label: '晚上 (18:00-21:00)', value: '18:00-21:00', disabled: true }
]);

// 选中的日期和时间
const selectedDate = ref('2023-06-21');
const selectedTime = ref('09:00-12:00');

// 是否可以提交
const canSubmit = computed(() => {
  return selectedDate.value && selectedTime.value && 
         (selectedDate.value !== orderInfo.value.serviceDate || 
          selectedTime.value !== orderInfo.value.serviceTime);
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 选择日期
const selectDate = (date) => {
  selectedDate.value = date;
};

// 选择时间
const selectTime = (time) => {
  if (!time.disabled) {
    selectedTime.value = time.value;
  }
};

// 提交修改
const submitChange = () => {
  if (!canSubmit.value) return;
  
  uni.showModal({
    title: '确认修改',
    content: `确定将服务时间修改为 ${selectedDate.value} ${selectedTime.value} 吗？`,
    success: function(res) {
      if (res.confirm) {
        uni.showLoading({
          title: '修改中...'
        });
        
        // 模拟请求
        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          });
          
          // 返回订单详情页
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
              success: function() {
                // 通过事件通道将修改后的时间传回订单详情页
                const eventChannel = uni.getOpenerEventChannel();
                eventChannel.emit('timeModified', {
                  serviceDate: selectedDate.value,
                  serviceTime: selectedTime.value
                });
              }
            });
          }, 1500);
        }, 1000);
      }
    }
  });
};

onMounted(() => {
  // 获取路由参数
  const eventChannel = getOpenerEventChannel();
  const orderId = eventChannel ? eventChannel.orderId : null;
  
  // 根据ID获取订单详情
  getOrderDetail(orderId);
});

// 获取订单详情
const getOrderDetail = (id) => {
  // 实际项目中应该调用API获取数据
  console.log('获取订单ID:', id);
  
  // 这里使用的是预设的数据
};
</script>

<style lang="scss" scoped>
.modify-time {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; // 为底部按钮留出空间
}

// 顶部导航栏
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 60rpx; // 为了标题居中
  }
}

// 当前服务时间
.current-time {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .time-info {
    font-size: 30rpx;
    color: #666;
  }
}

// 选择新的服务时间
.new-time {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
}

// 日期选择器
.date-selector {
  margin-bottom: 30rpx;
  
  .date-scroll {
    white-space: nowrap;
    height: 160rpx;
  }
  
  .date-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 160rpx;
    margin-right: 20rpx;
    border-radius: 12rpx;
    background-color: #f5f5f5;
    
    &.active {
      background-color: #ff7a45;
      
      .date-day, .date-date, .date-month {
        color: #fff;
      }
    }
    
    .date-day {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
    }
    
    .date-date {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 6rpx;
    }
    
    .date-month {
      font-size: 24rpx;
      color: #999;
    }
  }
}

// 时间段选择器
.time-selector {
  display: flex;
  flex-direction: column;
  
  .time-item {
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    border-radius: 8rpx;
    background-color: #f5f5f5;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #333;
    
    &.active {
      background-color: #fff8f6;
      border: 1px solid #ff7a45;
      color: #ff7a45;
    }
    
    &.disabled {
      opacity: 0.6;
    }
    
    .time-status {
      font-size: 24rpx;
      color: #999;
    }
  }
}

// 提示信息
.tips {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  
  text {
    font-size: 26rpx;
    color: #ff9500;
    margin-left: 10rpx;
  }
}

// 底部按钮
.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  z-index: 10;
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #ff7a45;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    
    &[disabled] {
      background-color: #cccccc;
      color: #ffffff;
    }
  }
}
</style>